<template>
  <div class="dialog_container">
    <el-dialog  v-model="dialogVisible" width="70%" :before-close="handleClose">
      <el-card class="box-card">
       <div class="title">2025年第一季度医疗国考指标分析</div>
        <div class="flex justify-content-center" style="padding: 10px 0">
           <div class="percent">86.5%</div>
           <div>
             <div class="tendency_percent">↑ + 2.3</div>
             <div class="tendency"> 较上期提升</div>
          </div>
        </div>
        <div class="date_update">数据更新日期：2025年4月15日</div>
      </el-card>
      <div class="grid-container">
        <el-card v-for="(card, index) in cardList" :key="index"  class="grid-item padding-top-bottom-16 padding-left-right-6" style="height: 140px;">
          <div class="flex justify-content-space-between">
            <div class="title">{{ card.title }}</div>
            <div :class="card.status" class="flex align-center" style="padding: 0 10px;border-radius: 5px;font-size: 12px">{{ card.statusText }}</div>
          </div>
          <div class="flex align-end " style="padding-top: 10px">
            <div class="count">{{ card.count }}</div>
            <div :class="card.status" class="analyze">{{ card.analyze }}</div>
          </div>
          <div class="flex align-end " style="padding-top: 5px; color: #999999;">{{card.desc}}</div>
        </el-card>
      </div>
      <el-card class="target-card">
        <div class="title">重点改进指标分析</div>
        <div class="antibiosis analyze_content">
          <div class="sub_title" style="color: #E04C4C;">抗菌药物使用强度</div>
          <div class="tips_box pink">当前值：58.6，高于国家标准（40）和同级医院平均水平（52.1）</div>
          <div style="font-size: 16px;margin-top: 14px">
            <div style="font-weight: 600;color: #333333">主要原因分析</div>
            <ul style="padding-left: 20px;">
              <li>外科预防性用药比例过高，占抗菌药物使用的42%</li>
              <li>抗菌药物使用疗程偏长，平均比指南推荐多2.3天</li>
              <li>部分科室（如呼吸科）广谱抗生素使用比例达65%，平均比指南推荐多2.3天</li>
            </ul>
          </div>
          <div style="font-size: 16px;margin-top: 14px">
            <div style="font-weight: 600;color: #333333">改进建议：</div>
            <ul style="padding-left: 20px;">
              <li>建立外科预防用药电子审核系统，严格限制预防用药指征</li>
              <li>制定各病种抗菌药物使用疗程标准，嵌入电子病历系统</li>
              <li>开展抗菌药物使用专项培训，重点提高微生物送检率</li>
            </ul>
          </div>
          <div class="tips_box blue">预期效果：实施后预计可将抗菌药物使用强度降低至50以下，提升指标评分15-20分</div>
        </div>
        <div class="inHospitalized analyze_content">
          <div class="sub_title" style="color: #B27F32;">平均住院日</div>
          <div class="tips_box yellow">当前值8.2天，高于同级医院平均水平（7.5天）</div>
          <div style="font-size: 16px;margin-top: 14px">
            <div style="font-weight: 600;color: #333333">主要原因分析</div>
            <ul style="padding-left: 20px;">
              <li>术前检查等待时间过长，占住院日的28%</li>
              <li>部分科室（如骨科）术后康复流程不优化</li>
              <li>出院准备不足导致延迟出院占12%</li>
            </ul>
          </div>
          <div style="font-size: 16px;margin-top: 14px">
            <div style="font-weight: 600;color: #333333">改进建议：</div>
            <ul style="padding-left: 20px;">
              <li>推行“一日住院”模式，将部分术前检查转为门诊完成</li>
              <li>建立多学科协作的临床路径，优化术后康复流程</li>
              <li>加强出院计划管理，提前48小时启动出院准备评估</li>
            </ul>
          </div>
          <div class="tips_box blue">预期效果：实施后预计可将平均住院日缩短至7.5天以下，提升指标评分8-12分</div>
        </div>

      </el-card>
      <el-card class="guid-card">
        <div class="title">具体行动指南</div>
        <div class="sub_title">抗菌药物使用强度</div>
        <div class="flex align-center " style="padding: 10px">
           <div class="index">1</div>
           <div class="right_box">
              <div class="card_title">建立抗菌药物使用电子审核系统</div>
              <div class="card_text">在电子病历系统中嵌入抗菌药物使用规则，对预防性用药、广谱抗生素使用等进行实时审核和提醒。</div>
              <div class="endTime">2024年5月前完成</div>
           </div>
        </div>
        <div class="flex align-center " style="padding: 10px">
          <div class="index">2</div>
          <div class="right_box">
            <div class="card_title">开展抗菌药物使用专项培训</div>
            <div class="card_text">针对外科、呼吸科等重点科室开展抗菌药物合理使用培训，提高微生物送检意识和能力</div>
            <div class="endTime">2024年6月前完成</div>
          </div>
        </div>
        <div class="flex align-center " style="padding: 10px">
          <div class="index">3</div>
          <div class="right_box">
            <div class="card_title">建立抗菌药物使用考核机制</div>
            <div class="card_text">将抗菌药物使用情况纳入科室绩效考核，每月公布各科室使用强度排名。</div>
            <div class="endTime">2024年7月前完成</div>
          </div>
        </div>

        <div class="sub_title">平均住院日优化计划</div>
        <div class="flex align-center " style="padding: 10px">
          <div class="index">1</div>
          <div class="right_box">
            <div class="card_title">推行“一日住院”术前检查模式</div>
            <div class="card_text">将择期手术患者的常规检查转为门诊完成，缩短术前住院时间。</div>
            <div class="endTime">2024年5月前完成试点</div>
          </div>
        </div>
        <div class="flex align-center " style="padding: 10px">
          <div class="index">2</div>
          <div class="right_box">
            <div class="card_title">优化术后康复临床路径</div>
            <div class="card_text">建立多学科协作的标准化康复流程，减少术后恢复时间。</div>
            <div class="endTime">2024年6月前完成</div>
          </div>
        </div>
        <div class="flex align-center " style="padding: 10px">
          <div class="index">3</div>
          <div class="right_box">
            <div class="card_title">加强出院计划管理</div>
            <div class="card_text">提前48小时启动出院准备评估,协调社区医疗资源做好出院衔接</div>
            <div class="endTime">2024年7月前完成</div>
          </div>
        </div>
      </el-card>

      <el-card class="target-card "  style="width: 100%;">
      <div class="flex justify-content-space-between flex-wrap">
        <el-button style="margin-top: 20px" type="primary" icon="download" @click="exportReport">导出分析报告</el-button>
        <div style="margin-top: 20px">
          <el-button icon="Comment" >帮助中心</el-button>
          <el-button icon="InfoFilled" >联系专家</el-button>
        </div>
      </div>
      </el-card>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
  analyzeDialogVisible: {
    type: Boolean,
    required: true,
  }
})
const dialogVisible = computed({
  get() {
    return props.analyzeDialogVisible
  },
  set(val) {
    emit('update:analyzeDialogVisible', val)
  }
})
const emit = defineEmits(['update:analyzeDialogVisible']);
const cardList = ref([
 {
    title: '门诊患者满意度',
    count: '2.8%',
    analyze: '2.8 %',
    status: 'reach',
    statusText: '达标',
    desc:"高于同级医院平均水平（90.2%)"
  }, {
    title: '平均住院日',
    count: '2.8%',
    analyze: '2.8 %',
    status: 'improved',
    statusText: '待改进',
    desc:"高于同级医院平均水平（7.5)"
  },
  {
    title: '手术并发症率',
    count: '2.8%',
    analyze: '2.8 %',
    statusText: '未达标',
    status: 'reach',
    desc:"高于同级医院平均水平（1.8%)"
  },
  {
    title: '手术并发症率',
    count: '2.8%',
    analyze: '2.8 %',
    status: 'noReach',
    statusText: '未达标',
    desc:"高于同级医院平均水平（52.1%)"
  }
]);
const handleClose = (done) => {
  emit('update:analyzeDialogVisible', false);
  done();
};
const exportReport = () => {
  proxy.$modal.msgError("该功能尚未接入！");
 };
</script>

<style scoped lang="scss">
.dialog_container{
  .el-card{
    border: none;
    border-radius: 13px;
    padding: 15px;
    margin-top: 20px;
  }
  .box-card{
    background-color: #FFFFFF;
    .title{
      font-size: 26px;
      color: #333;
      font-weight: bolder;
      text-align: center;
    }
    .percent{
      color: #3176FF;
      font-size: 34px;
      font-weight: 800;
      margin-right: 20px;
    }
    .tendency_percent{
      font-size: 16px;
      color: #44B36D !important;
    }
    .tendency {
      color: #999999;

    }
    .date_update{
      color: #999999;
      text-align: center;
      padding: 5px 0;
      font-size: 16px;
    }
  }
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 20px;
    .title {
      font-size: 16px;
      font-weight: 800;
      color: #333;
    }
    .icon {
      height: 20px;
    }
    .count {
      color: #464646;
      font-size: 26px;
      font-weight: 600;
    }
    .analyze{
      font-size: 16px;
      margin-left: 10px;
      padding-bottom: 5px;
      padding-top: 25px;
      background-color: #FFFFFF !important;
    }
    .reach {
      color: #41855A;
      background-color: #70d498;
    }
    .improved {
      color: #f35454;
      background-color: #FEF9C3;

    }
    .noReach {
      color: #af3c3c;
      background-color: #FEE2E2;
    }
  }
  .target-card{
    .title {
      font-size: 22px;
      font-weight: bolder;
      color: #333;
    }
    .analyze_content {
      padding-left:10px;
      margin-top: 10px;
      .sub_title{
        font-size: 18px;
        font-weight: bolder;
      }
      .tips_box{
        margin-top: 10px;
        padding: 16px 10px;
        border-radius: 12px;
        font-weight: bolder;
      }
      .pink{
        color: #E04C4C;
        background-color: #FEF2F2;
      }
      .blue{
        color: #416ADD;
        background-color: #EFF6FF;
      }
      .yellow{
        color: #B27F32;
        background-color: #FEFCE8;
      }
      ul{
        margin-top: 5px;
        li{
          color: #7A808B;
          padding: 2px 0;
        }
      }
    }
    .antibiosis{
      border-left: 3px solid #EF4444;
    }
    .inHospitalized{
      border-left: 3px solid #B27F32;
      margin-top: 40px;
    }
  }
  .guid-card{
    .title {
      font-size: 22px;
      font-weight: bolder;
      color: #333;
    }
    .sub_title{
      font-size: 18px;
      font-weight: bolder;
      margin-top: 20px;
    }
    .index{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #3176FF;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
    }
    .right_box{
      flex: 1;
      background-color: #f6f6f6;
      padding: 20px;
      border-radius: 5px;
      .card_title{
        font-size: 16px;
        color: #333;
        font-weight: bolder;
      }
      .card_text{
        padding-top: 5px;
        font-size: 14px;
        color: #6A727E;
      }
      .endTime{
        padding-top: 10px;
        color: #868C97;
      }
    }


  }
  .button-card{
    display: flex;
    border: 1px solid blue;
  }
}
:deep(.el-dialog){
  background-color: rgb(249, 250, 251, 0.95);
}
:deep(.el-card__body){
  width: 100%;
}
</style>
